<template>
  <header class="header-warp">
    <div class="logo">
      <img src="../assets/img/home_logo.png" alt>
    </div>
    <div class="user-logout" @click="logout()">
      <span class="iconfont icon-tuichu"></span>
      退出
    </div>
    <div class="user-info">
      <img class="user-head" src="../assets/img/user_head.png" alt>
      <el-dropdown trigger="click" @command="handleCommand">
        <span class="el-dropdown-link">
          <span class="user-name" v-if="nickname">{{nickname}}</span>
          <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="true">修改密码</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <div class="product">
      <span>产品：</span>
      <el-select v-model="appId" placeholder="请选择" @change="appIdChange">
        <el-option
          v-for="item in appIdoptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
    </div>

    <el-dialog
      title="修改密码"
      :visible.sync="dialogChangePassword"
      width="30%"
      :close="handleClose"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :modal-append-to-body="false"
    >
      <div class="dialog-body">
        <ul class="body-operation">
          <li>
            <span class="span1">用户名:</span>
            <span class="span2">
              <el-input v-model="editInfo.loginName" disabled placeholder="请输入用户名"></el-input>
            </span>
          </li>
          <li>
            <span class="span1">姓名:</span>
            <span class="span2">
              <el-input v-model="editInfo.nickname" disabled placeholder="请输入姓名"></el-input>
            </span>
          </li>
          <li>
            <span class="span1">原密码:</span>
            <span class="span2">
              <el-input
                v-model="editInfo.oldPassword"
                type="password"
                placeholder="请输入原密码"
                maxlength="20"
              ></el-input>
            </span>
          </li>
          <li>
            <span class="span1">新密码:</span>
            <span class="span2">
              <el-input
                v-model="editInfo.newPassword"
                type="password"
                placeholder="请输入新密码"
                maxlength="20"
              ></el-input>
            </span>
          </li>
        </ul>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="handleSrue">确 定</el-button>
      </span>
    </el-dialog>
  </header>
</template>

<script>
import md5 from "md5";
export default {
  props: ["login_user"],
  data() {
    return {
      nickname: null,
      dialogChangePassword: false,
      appIdoptions: [],
      appId: this.$store.state.id,
      editInfo: {
        loginName: "",
        nickname: "",
        oldPassword: "",
        newPassword: ""
      }
    };
  },
  methods: {
    handleCommand(command) {
      let that = this;
      that.dialogChangePassword = Boolean(command);
    },
    handleSrue() {
      let that = this;
      that.ajaxJson({
        url: "/system/modifyPassword",
        data: {
          loginName: that.editInfo.loginName,
          nickname: that.editInfo.nickname,
          oldPassword: md5(that.editInfo.oldPassword),
          newPassword: md5(that.editInfo.newPassword)
        },
        success: function(res) {
          if (res.code == "0") {
            that.showMsg("修改成功，请重新登录", "success");
            that.dialogChangePassword = false;
            that.logout();
          } else {
            that.showMsg(res.message, "error");
          }
        }
      });
    },
    handleClose() {
      let that = this;
      that.editInfo = {};
      that.dialogChangePassword = false;
    },
    appIdChange(row) {
      let that = this;
      let storeappId = that.$store.state.id;
      if (row == storeappId) {
        return;
      } else {
        //commit=>mutations,用来触发同步操作的方法。
        //dispatch =>actions,用来触发异步操作的方法。
        that.$store.dispatch("newAppId", row);
        that.appId = that.$store.state.id;
      }
    }
  },
  created() {
    let that = this;
    that.nickname = that.login_user.nickname;
    that.editInfo.nickname = that.login_user.nickname;
    that.editInfo.loginName = that.login_user.loginName;
    let supportApps = that.login_user.supportApps || [];
    supportApps.forEach(function(item, index) {
      that.appIdoptions.push({
        value: item.key,
        label: item.name
      });
    });
    that.appId = supportApps[0].key;
  }
};
</script>

<style lang="less">
.header-warp {
  height: 100%;
  font-size: 22px;
  padding: 0 20px;
  background: #fff;
  .logo {
    float: left;
    height: 30px;
    margin-top: 25px;
    img {
      display: block;
      height: 30px;
    }
  }
  .user-info {
    float: right;
    font-size: 0px;
    margin-right: 40px;
    margin-top: 20px;
    .user-name {
      font-size: 18px;
      color: #000;
    }
    .user-head {
      position: relative;
      top: 8px;
      background-color: #fff;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      margin-right: 10px;
    }
  }
  .user-logout {
    float: right;
    font-size: 18px;
    cursor: pointer;
    margin-top: 28px;
    .icon-logout {
      font-size: 24px;
      margin-right: 0px;
    }
  }
  .el-dropdown-menu__item {
    text-align: center;
  }
  .product {
    padding: 20px 0;
    margin-right: 30px;
    float: right;
    display: flex;
    span {
      width: 60px;
      font-size: 16px;
      line-height: 40px;
    }
    el-select {
      width: 120px;
    }
  }
}
</style>
